<template>
  <div class="w-100 h-100 px-3 flex-vertical justify-content-center">
    <div class="flex-center-center">
      <div class="input-box flex-center-center bg-white px-3 mb-5-5">
        <img src="@img/publish/icon.png" alt="" />
        <div class="text-plus">发布你感兴趣的内容</div>
      </div>
    </div>
    <div class="tab-wrapper w-100 d-flex justify-content-around flex-wrap text-plus">
      <div class="tab-box flex-center-center mb-5-5">#发布送养</div>
      <div class="tab-box flex-center-center mb-5-5">#发布日常</div>
      <div class="tab-box flex-center-center">#发布干货</div>
      <div class="tab-box flex-center-center">#发布寻宠</div>
    </div>
  </div>
</template>

<script></script>

<style lang="less" scoped>
@import '~@style/variable.less';

.input-box {
  height: 3.8rem;
  line-height: 3.8rem;
  border-radius: 3.8rem;
  border: 1px solid #fa7115;
  img {
    width: 3rem;
  }
}
.tab-wrapper {
  .tab-box {
    width: 10rem;
    height: 10rem;
    background-color: @bg1;
    border-radius: 1rem;
  }
}
</style>
